<template>
	<view class="">
		<u-popup :show="show" round="20rpx" @close="show = false">
			<view class="ctn-css">
				<view class="w-calc-22 title zoom-in4">
					<text>欢迎来到询车</text>
					<!-- #ifdef APP || H5 -->
					<text>APP</text>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<text>小程序</text>
					<!-- #endif -->
				</view>
				<view class="zoom8" style="margin-top: 187rpx">
					<!-- #ifdef H5 || APP -->
					<u-button
						type="primary"
						:customStyle="{
							height: '113rpx',
							borderRadius: '15rpx',
							fontWeight: '600',
							fontSize: '32rpx',
							color: '#FFFFFF'
						}"
						@click="onLogin"
					>
						<text>微信一键登录</text>
					</u-button>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<u-button
						type="primary"
						openType="getPhoneNumber"
						@getphonenumber="onLogin"
						:customStyle="{
							height: '113rpx',
							borderRadius: '15rpx',
							fontWeight: '600',
							fontSize: '32rpx',
							color: '#FFFFFF'
						}"
					>
						<text>手机号一键登录</text>
					</u-button>
					<!-- #endif -->
					<view class="mt28 color8 fs32 w100 text-center" @click="show = false">暂时跳过</view>
				</view>
				<view class="fs24 zoom8 center" style="margin-top: 130rpx">
					<view class="">
						<u-checkbox
							v-model:checked="agreePolicy"
							shape="circle"
							activeColor="#0759bb"
							usedAlone
							labelColor="#B5B5B5"
							:name="true"
						/>
					</view>
					<text class="base-color" @click="agreePolicy = !agreePolicy">
						<text class="color9">允许我们在必要场景下，合理使用您的个人信息，且阅读井同意</text>
						<text @click.passive.stop="navTo('pages/article/details', { code: 'agreement' })">《用户协议》</text>
						<text class="color9">|</text>
						<text @click.passive.stop="navTo('pages/article/details', { code: 'policy' })">《隐私政策》</text>
						<text class="color9">等内容</text>
					</text>
				</view>
			</view>
		</u-popup>
		<view class="">
			<u-popup
				:show="showAgree"
				closeable
				@close="showAgree = false"
				mode="center"
				round="30rpx"
				:safeAreaInsetBottom="false"
			>
				<view class="ptb30 plr50" style="width: 550rpx">
					<text class="center fs30 bold">温馨提示</text>
					<view class="fs26 mt50 base-color" style="line-height: 40rpx">
						<text class="color9">允许我们在必要场景下，合理使用您的个人信息，且阅读并同意</text>
						<text @click.passive.stop="navTo('pages/article/details', { code: 'agreement' })">《用户协议》</text>
						<text>|</text>
						<text @click.passive.stop="navTo('pages/article/details', { code: 'policy' })">《隐私政策》</text>
					</view>
					<view class="justify-between mt50">
						<u-button
							:custom-style="{ ...buttonStyle, color: '#b5b5b5', marginRight: '10rpx', border: '2px solid #b5b5b5' }"
							@click="showAgree = false"
						>
							不同意
						</u-button>
						<u-button :custom-style="{ ...buttonStyle, marginLeft: '10rpx' }" type="primary" @click="agreePolicy">
							同意
						</u-button>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="">
			<u-popup :show="showBind" mode="center" round="20rpx" @close="showBind = false">
				<view class="code-input">
					<view class="title">输入邀请码</view>
					<input
						v-model="bindCode"
						placeholder="邀请码"
						class="input-ctn"
						placeholder-class="input-hold"
						type="text"
					/>
					<view class="but-box">
						<view class="base cancel" @click="showBind=false">取消</view>
						<view class="base confirm" @click="setInviteCode">确认</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { navTo, navToPage, showSuccess } from '@/core/app';
import { useStore } from 'vuex';
import { bindParent, bindingWx } from '@/api/user';

/* 弹窗控制 */
const show = defineModel('show', {
	type: Boolean,
	default: false
});

/* 缓存初始化 */
const store = useStore();

/* 登录小程序 */
async function onLogin(e) {
	if (!checkReadPolicy()) return;
	const data = {};
	data.js_code = await getJsCode();
	if (e) {
		data.code = e.detail.code;
	}
	let result = await store.dispatch('LoginWX', data);
	if (result) {
		showSuccess(result.msg);
		if (!result.data.parent_id) {
			showBind.value = true;
		}
		setTimeout(() => {
			show.value = false;
			showBind.value = false;
		}, 500);
	}
}

/* 获取Jscode */
function getJsCode() {
	return new Promise((resolve, reject) => {
		uni.login({
			success: (e) => {
				resolve(e.code);
			}
		});
	});
}

/* 邀请码绑定控制 */
const showBind = ref(false);
const bindCode = ref('');
function setInviteCode() {
	if (!bindCode.value) return showToast('请输入邀请码');
	bindParent({
		code: bindCode.value
	}).then((res) => {
		if (res.code === 200) {
			showSuccess('绑定成功！');
			showBind.value = false;
			bindCode.value = '';
		}
	});
}

/* 协议控制 */
const showAgree = ref(false);
const agreePolicy = ref(false);
const checkReadPolicy = () => {
	if (!agreePolicy) {
		showAgree.value = true;
		return false;
	} else {
		return true;
	}
};
</script>

<style scoped lang="scss">
.ctn-css {
	width: 100%;
	height: 721rpx;
	padding: 65rpx 35rpx 38rpx 34rpx;
	box-sizing: border-box;

	.title {
		font-weight: 600;
		font-size: 38rpx;
		color: #121212;
	}
}

.code-input {
	width: 572rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 59rpx 67rpx 71rpx 68rpx;
	box-sizing: border-box;

	.title {
		width: 100%;
		font-weight: 600;
		font-size: 32rpx;
		color: #121212;
		text-align: center;
	}

	.input-ctn {
		width: 100%;
		height: 78rpx;
		background-color: #e8f3ff;
		margin-top: 46rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		padding: 0 35rpx 0 35rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
	}

	.input-hold {
		font-weight: 400;
		font-size: 24rpx;
		color: #959595;
	}

	.but-box {
		margin-top: 58rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.base {
			width: 200rpx;
			height: 78rpx;
			border-radius: 15rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.cancel {
			background: #f3f3f3;
			font-weight: bold;
			font-size: 30rpx;
			color: #121212;
		}

		.confirm {
			background: #0759bb;
			font-weight: bold;
			font-size: 30rpx;
			color: #ffffff;
			margin-left: 37rpx;
		}
	}
}
</style>
